<template>
  <template v-if="!readonly">
    <el-dropdown @command="onchange">
      <el-tag
        :size="size"
        :effect="effect"
        :style="{ color: '#fff', width: width, cursor: 'pointer' }"
        :color="mycolors.getColor(valueProp, value) || defaultColor"
      >{{ label || nullText }}</el-tag>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item: any, index) in options"
            :command="item.code || item.value || item.id"
          >{{ item.name || item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </template>
  <template v-else>
    <el-tag
      v-if="value || !hideNull"
      :size="size"
      :effect="effect"
      :style="{ color: '#fff', width: width }"
      :color="mycolors.getColor(valueProp, value) || defaultColor"
    >{{ label || nullText }}</el-tag>
  </template>
</template>


<script lang="ts" setup>

import { ref, computed, PropType } from 'vue'
import { mycolors } from '@/common/colors';
import { ActionState } from '@/common/AuthState'
import { ElComponentSize, ElComponentEffect } from '@/utils/constants'

const props = defineProps({
  useAuth: { type: Boolean, required: true, default: true },
  useLock: { type: Boolean, required: true, default: true },
  authTag: { type: Number, required: true, default: 0xFFFF },
  lockState: { type: Number, required: true, default: 0 },
  masterLockState: { type: Number, required: true, default: 0 },

  row: { type: Object, required: true },
  valueProp: { type: String, required: true },
  labelProp: { type: String, required: true },
  options: { type: Array, default:[] },
  hideNull: { type: Boolean, required: true, default: false },
  nullText: { type: String, required: true, default: '<未知>' },
  defaultColor: { type: String, default: '#55acee' },

  size: { type: String as PropType<ElComponentSize>, default: 'medium' },
  effect: { type: String as PropType<ElComponentEffect>, default: 'light' },
  width: { type: String, default: '60px' },
});

const actionState = computed(() => {
  return new ActionState(props.useAuth, props.useLock, props.authTag, props.lockState, props.masterLockState);
});

const value = computed(() => {
  return props.row[props.valueProp];
});

const label = computed(() => {
  return props.row[props.labelProp];
});

const readonly = computed(() => {
  if(props.options == null || props.options == undefined || props.options.length == 0)return true;
  return actionState.value.readonly();
});

const emit = defineEmits(["change"]);

const onchange = (command: string) => {
  debugger;
  if (actionState.value.readonly()) {
    return;
  }
  emit("change", props.row, command);
}

</script>